<template>
	<view class="recommend">
		<!-- 轮播图 -->
		<swiper class="banners" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			:circular="true" indicator-active-color="#eee">
			<swiper-item>
				<view class="swiper-item">
					<image
						src="https://yanxuan.nosdn.127.net/static-union/16681588220b6e17.jpg?type=webp&imageView&quality=75&thumbnail=750x0"
						mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="https://yanxuan.nosdn.127.net/6e2350c66556e3cd4ddc813ef0e60df7.jpg?type=webp&imageView&quality=75&thumbnail=750x0"
						mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="https://yanxuan.nosdn.127.net/5a465fefbada1177b3d93f51f7918b35.jpg?type=webp&imageView&quality=75&thumbnail=750x0"
						mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 品牌图标列表 -->
		<view class="brand-list">
			<view class="brand-item" v-for="(item,index) in indexData.policyDescList" :key="item.desc">
				<image :src="item.icon" mode=""></image>
				<text class="desc">{{item.desc}}</text>
			</view>
		</view>

		<!-- 新品图标列表 -->
		<view class="product-list" v-if="indexData.kingKongModule">
			<view class="product-item" v-for="(item,index) in indexData.kingKongModule.kingKongList" :key="item.L1Id">
				<image :src="item.picUrl" mode=""></image>
				<text class="text">{{item.text}}</text>
			</view>
		</view>

		<!-- 分类区 -->
		<view class="categroy-container">
			<view class="categroy-item" v-for="(c,index) in indexData.categoryModule" :key="c.titlePicUrl">
				<image :src="c.titlePicUrl" mode=""></image>
				<scroll-view scroll-x="true" class="scroll-shop-list">
					<view class="shop-item" v-for="item in c.itemList" :key="item.id">
						<image :src="item.showPicUrl" mode=""></image>
						<view class="shop-info">{{item.name}}</view>
					</view>
					<view class="shop-item more">
						<text>更多选择+</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapState({
				indexData: state => state.home.indexData
			})
		}


	}
</script>

<style lang="scss">
	.recommend {
		.banners {
			width: 100%;
			height: 350rpx;

			image {
				width: 100%;
				height: 350rpx;
			}
		}

		.brand-list {
			display: flex;
			margin-top: 10rpx;

			.brand-item {
				flex: 1;
				text-align: center;

				image {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}

				.desc {
					margin-left: 5rpx;
					font-size: 24rpx;
				}

				&:nth-of-type(2) {
					text-align: left;
					padding-left: 20rpx;
				}

				&:nth-of-type(3) {
					text-align: left;
				}
			}


		}

		.product-list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.product-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;

				image {
					margin-bottom: 20rpx;
					width: 110rpx;
					height: 110rpx;
				}

				.text {
					font-size: 26rpx;
				}
			}
		}

		.categroy-container {
			.categroy-item {
				margin: 20rpx 0;

				image {
					width: 100%;
					height: 370rpx;
				}

				.scroll-shop-list {
					white-space: nowrap;
					box-sizing: border-box;

					.shop-item {
						margin-right: 20rpx;
						display: inline-block;
						width: 200rpx;
						vertical-align: top;
						font-size: 26rpx;

						&:nth-of-type(1) {
							margin-left: 20rpx;
						}

						image {
							width: 200rpx;
							height: 200rpx;
							background-color: #eee;
						}

						.shop-info {
							white-space: pre-wrap;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						&.more {
							height: 200rpx;
							line-height: 200rpx;
							text-align: center;
							background-color: #eee;
						}
					}

				}
			}
		}
	}
</style>
